<template>
  <div class="class_main">
    <v-header headTitle="发布闲置" goBack="true"></v-header>
    <div class="class_title">
      <p>点击选择对应的商品，让闲置处理更方便！</p>
    </div>
    <ul class="mainmenu clearfix">
      <li><a href="/"><b class="one"></b><span>家具</span></a></li>
      <li><a href="/"><b class="two"></b><span>母婴</span></a></li>
      <li><a href="/"><b class="three"></b><span>家电</span></a></li>
      <li><a href="/"><b class="four"></b><span>交通</span></a></li>
      <li><a href="/"><b class="five"></b><span>家居</span></a></li>
      <li><a href="/"><b class="six"></b><span>文体</span></a></li>
      <li><a href="/"><b class="seven"></b><span>卡券</span></a></li>
      <li><a href="/"><b class="eight"></b><span>数码</span></a></li>
      <li><a href="/"><b class="nine"></b><span>美妆</span></a></li>
      <li><a href="/"><b class="ten"></b><span>鞋包</span></a></li>
      <li><a href="/"><b class="eleven"></b><span>服饰</span></a></li>
      <li><a href="/"><b class="twelve"></b><span>植物</span></a></li>
      <li><a href="/"><b class="thirteen"></b><span>食品</span></a></li>
      <li><a href="/"><b class="fourteen"></b><span>其它</span></a></li>
    </ul>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/base.scss";
  @import "../../common/sass/mixin.scss";

  .class_main {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    padding-bottom: 100%;
    .class_title{
      width: 100%;
      height: 55px;
      text-align: center;
      p{
       font-size: 15px;
        color: #545454;
        line-height: 55px;
      }
    }
    .mainmenu {
      width: 100%;
      margin-bottom: 10px;
      li {
        float: left;
        width: 25%;
        overflow: hidden;
        height: 80px;
        a {
          display: block;
          text-align: center;
          text-decoration: none;
          b {
            display: inline-block;
            margin: 14px auto 7px;
            height: 27px;
            width: 27px;
            background-size: 27px 27px;
            background-repeat: no-repeat;
            @include bgimg("./images/jiaju1");
            &.two {
              @include bgimg("./images/muying");
            }
            &.three {
              @include bgimg("./images/jiadian");
            }
            &.four {
              @include bgimg("./images/jiaotong");
            }
            &.five {
              @include bgimg("./images/jiaju");
            }
            &.six {
              @include bgimg("./images/wenti");
            }
            &.seven {
              @include bgimg("./images/kajuan");
            }
            &.eight {
              @include bgimg("./images/shuma");
            }
            &.nine {
              @include bgimg("./images/meizhuang");
            }
            &.ten {
              @include bgimg("./images/xiebao");
            }
            &.eleven {
              @include bgimg("./images/fushi");
            }
            &.twelve {
               @include bgimg("./images/zhiwu");
             }
            &.thirteen{
              @include bgimg("./images/shipin");
            }
            &.fourteen{
              @include bgimg("./images/qita");
            }
          }
          span {
            display: block;
            color: black;
            font-size: 12px;
            // font-weight: 900;
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'

  export default {
    name: 'Classify',
    data () {
      return {}
    },
    components: {
      'v-header': headTop
    }
  }
</script>
